<template>
    <div>
        <el-form :model="form" ref="searchForm" label-width="100px">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="开始日期" label-width="100px" prop="week">
                        <el-date-picker
                            type="week"
                            v-model="form.week"
                            format="yyyy 第 WW 周"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择需要导出的周"
                            @change="changeWeek"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="exportHandover" :loading="loading">导出</el-button>
                </el-col>
            </el-row>
        </el-form>

        <el-table
            :data="tableData"
            stripe
            border
            :default-sort="{prop: 'date', order: 'descending'}"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline>
                        <el-form-item :label="(index+1)+' . '" :key="index" v-for="(content, index) in props.row.Contents" style="width: 100%">
                            <span>{{content.content}}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="date" label="日期" sortable></el-table-column>
            <el-table-column prop="shift" label="班次" sortable>
                <template slot-scope="scope">
                    <span>{{ scope.row.shift === 1 ? '早班' : '晚班'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="User" label="人员" sortable>
                <template slot-scope="scope">
                    <span>{{scope.row.User.name}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="nr_begin" label="日结开始" sortable></el-table-column>
            <el-table-column prop="nr_end" label="日结结束" sortable></el-table-column>
            <el-table-column prop="temperature" label="温度" sortable></el-table-column>
            <el-table-column prop="humidity" label="湿度" sortable></el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            tableData: [],
            form: {
                week: null,
            },
        }
    },
    methods: {
        reset(formName) {
            this.$refs[formName].resetFields()
        },
        async changeWeek() {
            this.loading = true
            const response = await this.$http.get('/handoverListWeek', {
                params: this.form,
            })
            if (response && response.code === 0) {
                this.tableData = response.returnObject
            }
            this.loading = false
        },
        async exportHandover() {
            const response = await this.$http.get('/handoverExport', {
                params: this.form,
                // responseType: 'blob'
            })
            if (response && response.code === 0) {
                const blob = new Blob([new Int8Array(response.returnObject.data)])
                const downloadElement = document.createElement('a')
                const href = window.URL.createObjectURL(blob) //创建下载的链接
                downloadElement.href = href
                downloadElement.download = '导出文件.xlsx' //下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() //点击下载
                document.body.removeChild(downloadElement) //下载完成移除元素
                window.URL.revokeObjectURL(href) //释放掉blob对象
            }
        },
    },
}
</script>

<style scoped>
</style>
